/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-05-08 15:39:22
 * @LastEditTime : 2023-05-08 15:52:10
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\Common\Template\TimeMachine.jsx
 * @Description  :
 */
import './Scss/TimeMachine.scss'
import { useState, useEffect } from 'react'
import { useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { Player, BigPlayButton } from 'video-react'

export const TimeMachine001 = ({ yearList, monthList, tabsList, numberList }) => {
    const [Year] = useState(yearList)
    const [Month, setMonth] = useState(monthList)
    const [Tabs, setTabs] = useState(tabsList)
    const [Number, setNumber] = useState(numberList)

    const [YearActive, setYearActive] = useState(yearList[0].uuid)
    const [MonthActive, setMonthActive] = useState(monthList[0].uuid)
    const [TenderActive, setTenderActive] = useState(tabsList[0].uuid)
    const [NumberActive, setNumberActive] = useState(numberList[0].uuid)

    const [OrgType, setOrgType] = useState(0)

    const [Video, setVideo] = useState()

    const { runAsync } = useRequest(Http, { manual: true })

    useEffect(() => {
        let data = {
            Year: YearActive,
            Month: MonthActive,
            OrgType: OrgType,
            Number: NumberActive,
        }
        if (OrgType === 0) data.OrganizationUuid = TenderActive
        else data.ImportantPartUuid = TenderActive

        runAsync({ url: 'getHomeGetVideos', data }).then(res => {
            setVideo()
            const { month, org, rowCount, video } = res
            if (month.length !== 0) {
                let list = JSON.parse(JSON.stringify(monthList))
                month.forEach(({ month }) => (list.find(v => v.uuid === month).disable = false))
                setMonth(list)
            } else setMonth(monthList)
            if (org.length !== 0) {
                let list = JSON.parse(JSON.stringify(tabsList))
                org.forEach(({ organizationUuid }) => {
                    const tabsListVideo = list.find(v => v.uuid === organizationUuid)
                    if (tabsListVideo?.disable) tabsListVideo.disable = false
                })
                setTabs(list)
            } else setTabs(tabsList)
            if (rowCount !== 0) {
                let list = JSON.parse(JSON.stringify(numberList))
                console.log('[list]', list)
                console.log('[rowCount]', rowCount)
                for (let i = 0; i < rowCount; i++) list[i].disable = false
                setNumber(list)
            } else setNumber(numberList)
            if (video.length !== 0) {
                setVideo(video[0])
            }
        })
    }, [runAsync, YearActive, MonthActive, TenderActive, NumberActive, OrgType, monthList, tabsList, numberList])

    return (
        <div className="TimeMachine001">
            <div className="Options">
                <div className="Box">
                    <div className="Year">
                        <div className="Label">年份：</div>
                        <div className="List">
                            {Year.map(({ uuid, title, width, disable }) => (
                                <div
                                    key={title}
                                    className={YearActive === uuid ? 'active' : ''}
                                    style={
                                        disable
                                            ? {
                                                  width,
                                                  borderColor: '#95b6d0',
                                                  color: '#95b6d0',
                                                  cursor: 'not-allowed',
                                              }
                                            : { width }
                                    }
                                    onClick={() => {
                                        if (!disable) {
                                            setYearActive(uuid)
                                            setNumberActive('1')
                                        }
                                    }}
                                >
                                    {title}
                                </div>
                            ))}
                        </div>
                    </div>
                    <div className="Month">
                        <div className="Label">月份：</div>
                        <div className="List">
                            {Month.map(({ uuid, title, width, disable }) => (
                                <div
                                    key={title}
                                    className={MonthActive === uuid ? 'active' : ''}
                                    style={
                                        disable
                                            ? {
                                                  width,
                                                  borderColor: '#95b6d0',
                                                  color: '#95b6d0',
                                                  cursor: 'not-allowed',
                                              }
                                            : { width }
                                    }
                                    onClick={() => {
                                        if (!disable) {
                                            setMonthActive(uuid)
                                            setNumberActive('1')
                                        }
                                    }}
                                >
                                    {title}
                                </div>
                            ))}
                        </div>
                    </div>
                    <div className="Tabs">
                        <div className="Label">工区：</div>
                        <div className="List">
                            {Tabs.map(({ uuid, title, width, disable, orgType }) => (
                                <div
                                    key={title}
                                    className={TenderActive === uuid ? 'active' : ''}
                                    style={
                                        disable
                                            ? {
                                                  width,
                                                  borderColor: '#95b6d0',
                                                  color: '#95b6d0',
                                                  cursor: 'not-allowed',
                                              }
                                            : { width }
                                    }
                                    onClick={() => {
                                        if (!disable) {
                                            setOrgType(orgType)
                                            setTenderActive(uuid)
                                            setNumberActive('1')
                                        }
                                    }}
                                >
                                    {title}
                                </div>
                            ))}
                        </div>
                    </div>
                    <div className="Number">
                        <div className="Label">次数：</div>
                        <div className="List">
                            {Number.map(({ uuid, title, width, disable }) => (
                                <div
                                    key={title}
                                    className={NumberActive === uuid ? 'active' : ''}
                                    style={
                                        disable
                                            ? {
                                                  width,
                                                  borderColor: '#95b6d0',
                                                  color: '#95b6d0',
                                                  cursor: 'not-allowed',
                                              }
                                            : { width }
                                    }
                                    onClick={() => (disable ? '' : setNumberActive(uuid))}
                                >
                                    {title}
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
            <div className="Videos">
                {Video && (
                    <Player fluid={false} height={'100%'} muted src={Video?.fileUrl}>
                        <BigPlayButton position="center" />
                    </Player>
                )}
            </div>
        </div>
    )
}
